<script setup>
import { defineProps, defineEmits } from "vue";

/* 接收父组件传入的 visible 属性 */
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:visible"]);

/* 关闭对话框时，触发父组件更新 */
const handleClose = () => {
  emit("update:visible", false);
};

/* 确认按钮点击时，触发父组件更新 */
const onConfirm = () => {
  emit("update:visible", false);
};
</script>

<template>
  <!-- 使用 :visible 和 @update:visible 来进行绑定和事件监听 -->
  <el-dialog :visible="visible" @close="handleClose">
    <slot name="FormContent">表单内容</slot>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">Cancel</el-button>
        <el-button type="primary" @click="onConfirm">Confirm</el-button>
      </div>
    </template>
  </el-dialog>
</template>
